<template>
  <div class="common-layout">
    <el-container style="height: 100vh">
      <el-header>
        <system-header></system-header>
      </el-header>
      <el-container class="mainContainer">
        <el-aside width="200px">
          <el-scrollbar>
            <el-menu unique-opened collapse-transition>
              <!-- <el-sub-menu v-for=""></el-sub-menu> -->
              <el-sub-menu
                v-for="item in asideList"
                :key="item.name"
                :index="item.index"
              >
                <template #title>
                  <el-icon
                    ><img :src="require('../assets/aside/' + item.icon)" alt=""
                  /></el-icon>
                  {{ item.label }}
                </template>

                <el-menu-item
                  v-for="j in item.children"
                  :key="j.name"
                  :index="j.index"
                >
                  <div class="child-select" @click="toLink(j.path)">
                    {{ j.label }}
                  </div>
                </el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <!-- <router-link to=""></router-link> -->
          <!-- <home-index :class="showHome"></home-index> -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import SystemAside from "./SystemAside.vue"
// import HomeIndex from "../views/home/HomeIndex.vue";
import SystemHeader from "./SystemHeader.vue";
export default {
  name: "SystemHome",
  components: { SystemHeader },
  data() {
    return {
      asideList: [
        {
          name: "regionManage",
          label: "区域管理",
          icon: "quyu.png",
          index: "1",
          children: [
            {
              name: "regionList",
              path: "/regionList",
              label: "区域列表",
              index: "1-1",
            },
          ],
        },
        {
          name: "orderManage",
          label: "订单管理",
          icon: "dindan.png",
          index: "2",
          children: [
            {
              name: "orderList",
              path: "/orderList",
              label: "订单列表",
              index: "2-1",
            },
            {
              name: "refundList",
              path: "/refundList",
              label: "退款列表",
              index: "2-2",
            },
            {
              name: "adoptOrderList",
              path: "/adoptOrderList",
              label: "认养订单列表",
              index: "2-3",
            },
            {
              name: "adoptRefundList",
              path: "/adoptRefundList",
              label: "退款列表",
              index: "2-4",
            },
          ],
        },
        {
          name: "goodsManage",
          label: "商品管理",
          icon: "shangping.png",
          index: "3",
          children: [
            {
              name: "goodsList",
              path: "/goodsList",
              label: "商品列表",
              index: "3-1",
            },
            {
              name: "deliveryModeManage",
              path: "/deliveryModeManage",
              label: "配送方式管理",
              index: "3-2",
            },
          ],
        },
        {
          name: "cropsManage",
          label: "农作物管理",
          icon: "nongzuowu.png",
          index: "4",
          children: [
            {
              name: "cropsManageList",
              path: "/cropsManageList",
              label: "农作物管理列表",
              index: "4-1",
            },
            {
              name: "launchBatchManage",
              path: "/launchBatchManage",
              label: "投放批次管理",
              index: "4-2",
            },
          ],
        },
        {
          name: "financeManage",
          label: "财务管理",
          icon: "caiwu.png",
          index: "5",
          children: [
            {
              name: "incomeExpenseManage",
              path: "/incomeExpenseManage",
              label: "收支管理",
              index: "5-1",
            },
            {
              name: "withdrawalRecord",
              path: "/withdrawalRecord",
              label: "提现记录",
              index: "5-2",
            },
            {
              name: "invoiceManage",
              path: "/invoiceManage",
              label: "发票管理",
              index: "5-3",
            },
          ],
        },
      ],
      showHome: "show-home",
    };
  },
  methods: {
    toLink(path) {
      this.$router.push({
        name: path,
      });
    },
  },
  // watch: {
  //   $route(to, from) {
  //     console.log(from.path); //从哪来
  //     console.log(to.path); //到哪去
  //     if (to.path !== "/") {
  //       this.showHome = "no-show-home";
  //     } else {
  //       this.showHome = "show-home";
  //     }
  //   },
  // },
};
</script>

<style lang="less">
.show-home {
  display: block;
}
.no-show-home {
  display: none;
}

.common-layout {
  .mainContainer {
    display: flex;
  }
  .el-header,
  .el-main {
    margin: 0;
    padding: 0;
  }
  .el-menu {
    border: none;
  }

  .el-menu-item {
    padding: 0 !important;
  }

  .el-menu-item:hover {
    background-color: #fafafa;
  }
  .el-sub-menu__title {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
  }
  .el-sub-menu__title a {
    color: #101010;
  }
  .el-sub-menu__title a:hover {
    color: #ff5d0a;
  }
  .el-sub-menu__title:hover {
    color: #ff5d0a;
    background: #fafafa;
  }
  .child-select {
    width: 184px;
    height: 38px;
    margin: 6px 8px;
    padding-left: 42px;
    line-height: 38px;
    border-radius: 4px;
  }
  .child-select:hover {
    color: #ff5d0a;
    background: rgba(255, 93, 10, 0.07);
  }
  .el-main {
    background-color: #f5f5f5;
    display: flex;
    flex: 1;
  }
}
</style>